<template>
	<view class="content1">
		<view class="search">
			<input class="search_input" type="text" value="" placeholder="你想住哪" />
			<text class="search_text">搜索</text>
		</view>
		<view class="hsort">
			<view class="hsort_inner">
				<text class="hsort_inner_text">租金</text>
				<image class="hsort_inner_icon" v-if="topPrice" @click="topToLow" src="../../static/img/jiantou1.png" mode=""></image>
				<image class="hsort_inner_icon" v-if="!topPrice" @click="topToLow1" src="../../static/img/jiantou2.png" mode=""></image>
			</view>
			<view class="hsort_inner">
				<picker @change="bindPickerChange" :value="index" :range="orderArray">
					<view class="uni-input">{{orderArray[index]}}</view>
				</picker>
				<image class="hsort_inner_icon" src="../../static/img/jiantou1.png" mode=""></image>
			</view>
			<view class="hsort_inner" @tap="open('select')">
				<text class="hsort_inner_text">筛选</text>
				<image class="hsort_inner_icon" src="../../static/img/jiantou1.png" mode=""></image>
			</view>
		</view>
		<view class="hlist" @tap="toDetail">
			<image class="hlist_img" src="../../static/img/1.jpg" mode=""></image>
			<view class="hlist_right">
				<view class="hlist_title">合租-深圳宝安3室一厅-南卧</view>
				<view class="hlist_title" style="margin-top: 5rpx;">23m|2室一厅|朝南|莲花村北苑</view>
				<view class="hlist_position">深圳市宝安区西乡南地铁站200米</view>
				<view class="hlist_tag">
					<view class="hlist_tag_inner">独立卫生间</view>
					<view class="hlist_tag_inner">独立阳台</view>
				</view>
				<view class="hlist_price">￥2350/月</view>
			</view>
		</view>
		<view class="hlist" @tap="toDetail">
			<image class="hlist_img" src="../../static/img/2.jpg" mode=""></image>
			<view class="hlist_right">
				<view class="hlist_title">合租-深圳宝安3室一厅-南卧</view>
				<view class="hlist_title" style="margin-top: 5rpx;">23m|2室一厅|朝南|莲花村北苑</view>
				<view class="hlist_position">深圳市宝安区西乡南地铁站200米</view>
				<view class="hlist_tag">
					<view class="hlist_tag_inner">独立卫生间</view>
					<view class="hlist_tag_inner">独立阳台</view>
				</view>
				<view class="hlist_price">￥2350/月</view>
			</view>
		</view>
		<!-- 筛选弹框 -->
		<view v-if="modalName=='select'" class="diolag">
			<view class="diolag_inner">
				<view class="diolag_title">筛选</view>
				<view class="select_box">
					<view class="select_title">出租方式</view>
					<view class="select_tag" >
						<view class="tags" v-for="(item,index) in tagList1" :class="{selected_color: tagIndex1 == index}" :key="index" @tap="tagIndex1 = index">{{item}}</view>
					</view>
				</view>
				<view class="select_box">
					<view class="select_title">户型</view>
					<view class="select_tag">
						<view class="tags" v-for="(item,index) in tagList2" :class="{selected_color: tagIndex2 == index}" :key="index" @tap="tagIndex2 = index">{{item}}</view>
					</view>
				</view>
				<view class="select_box">
					<view class="select_title">特色</view>
					<view class="select_tag">
						<view class="tags" v-for="(item,index) in tagList3" :class="{selected_color: selectedTag.includes(item)}" :key="index" @tap="selectTag(item)">{{item}}</view>
					</view>
				</view>
				<view class="padding-xl flex">
					<view class="sure_btn" style="background: #ffffff;border: 1rpx solid #007AFF;color: #007AFF;" @tap="hideModal">重置</view>
					<view class="sure_btn" @tap="hideModal">确认</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				topPrice: true,
				modalName: '',
				orderArray:['综合排序','离我最近','最新发布','价格从低到高','价格从高到低'],
				index: 0,
				tagList1: ["整租","合租"],
				tagIndex1: '',
				tagList2: ["1室","2室"],
				tagIndex2: '',
				tagList3: ["15天退押金","WiFi","大阳台","电梯房","可短租","带家电"],
				selectedTag: []
			}
		},
		methods: {
			toDetail(){
				uni.navigateTo({
					url: '../houseDetail/houseDetail'
				})
			},
			topToLow(){
				this.topPrice = false
			},
			topToLow1(){
				this.topPrice = true
			},
			// 打开筛选弹框
			open(type){
				this.modalName = type
			},
			hideModal(){
				this.modalName = ""
			},
			bindPickerChange(e){
				this.index = e.target.value
			},
			// 选择亮点
			selectTag(i){
				let that = this
				if(that.selectedTag.includes(i)){
					that.selectedTag = that.selectedTag.filter(function(item) {
						return item != i
					});
				}else{
					that.selectedTag.push(i)
				}
			},
		}
	}
</script>

<style lang="scss">
	.diolag{
		position:fixed;
		background-color:rgba(0,0,0,0.5);
		width:100vw;
		height:100vh;
		top:0;
		left:0;
	}
	.diolag_inner{
		width:70%;
		margin:0 auto;
		position:absolute;
		top:0;
		right: 0;
		background: #ffffff;
		height: 100vh;
		overflow-y: scroll;
		padding: 20rpx;
	}
	.diolag_title{
		width: 90%;
		margin: 0 auto;
		text-align: center;
		color: #333333;
		padding: 20rpx;
		margin-bottom: 10rpx;
	}
	.select_box{
		width: 90%;
		margin: 0 auto;
		.select_title{
			font-size: 32rpx;
			color: #999999;
			margin-top: 30rpx;
			margin-bottom: 20rpx;
			text-align: left;
		}
		.select_tag{
			display: flex;
			align-items: center;
			justify-content: flex-start;
			flex-wrap: wrap;
			.tags{
				font-size: 32rpx;
				color: #333333;
				padding: 10rpx 20rpx;
				background: #efefef;
				border-radius: 20rpx;
				margin-right: 20rpx;
				margin-bottom: 20rpx;
			}
		}
	}
	.sure_btn{
		width: 120rpx;
		height: 60rpx;
		line-height: 60rpx;
		color: #ffffff;
		background: #007AFF;
		text-align: center;
		margin: 50rpx auto 0 auto;
		border-radius: 10rpx;
	}
	.content1{
		background: #F3F6F8;
		padding-bottom: 50rpx;
		.search{
			width: 96%;
			margin: 0 auto;
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 80rpx;
			padding-top: 20rpx;
			.search_input{
				width: calc(100% - 110rpx);
				height: 60rpx;
				background: #E9ECEF;
				border-radius: 60rpx;
				padding: 0 20rpx;
				font-size: 28rpx;
			}
			.search_text{
				color: #707171;
				font-size: 32rpx;
			}
		}
		.hsort{
			width: 96%;
			margin: 30rpx auto;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.hsort_inner{
				width: 32%;
				display: flex;
				align-items: center;
				justify-content: center;
				.hsort_inner_text{
					color: #BFBFC0;
					font-size: 32rpx;
					display: block;
				}
				.hsort_inner_icon{
					width: 30rpx;
					height: 30rpx;
					margin-left: 10rpx;
				}
			}
		}
		.hlist{
			width: 96%;
			margin: 0 auto;
			margin-bottom: 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			background: #FFFFFF;
			border-radius: 20rpx;
			padding: 20rpx 0;
			.hlist_img{
				width: 200rpx;
				height: 150rpx;
				border-radius: 10rpx;
				margin-left: 20rpx;
			}
			.hlist_right{
				margin-left: 20rpx;
				width: calc(100% - 230rpx);
				.hlist_title{
					font-size: 32rpx;
					color: #333333;
					margin-top: 20rpx;
				}
				.hlist_position{
					font-size: 28rpx;
					color: #CACACA;
					margin-top: 10rpx;
				}
				.hlist_tag{
					width: 100%;
					display: flex;
					align-items: center;
					.hlist_tag_inner{
						background: #F2F2F2;
						padding: 5rpx 20rpx;
						font-size: 28rpx;
						color: #C9C8C9;
						border-radius: 10rpx;
						margin-right: 20rpx;
					}
				}
				.hlist_price{
					font-size: 36rpx;
					color: red;
					margin-top: 20rpx;
				}
			}
		}
	}
</style>
